<template>
    <Transition name="fade">
        <div class="screen-tip-overlay">
            <div class="screen-tip-box">
                <p>{{ message }}</p>
                <button @click="closeTip">关闭</button>
            </div>
        </div>
    </Transition>
</template>

<script>
    // import { Transition } from 'vue';

    export default {
        name: 'ScreenTip',
        components: {
            // Transition,
        },
        props: {
            message: {
                type: String,
                required: true,
            },
            duration: {
                type: Number,
                default: 3000, // 默认3秒后关闭
            },
        },
        data() {
            return {
                isVisible: true,
            };
        },
        mounted() {
        },
        methods: {
            closeTip() {
                this.isVisible = false;
                if (this.resolve) {
                    this.resolve();
                }
            },
            showTip() {
                return new Promise((resolve) => {
                    this.resolve = resolve;
                    this.isVisible = true;
                });
            },
        },
    };
</script>

<style scoped>
    .screen-tip-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 20px;
        z-index: 1000;
    }

    .screen-tip-box {
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 300px;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s ease;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>
